<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>02_Vue中的数据代理</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <p>姓名：<span>{{ name }}</span></p>
      <p>年龄：<span>{{ age }}</span></p>
      <p>姓名：<span>{{ _data.name }}</span></p>
      <p>年龄：<span>{{ _data.age }}</span></p>
    </div>
  </body>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示。
    const data = { name: "张三", gender: "男", age: 28 };
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: "#app",
      data() {
        return data;
      },
    });

    vm.age = 100;
    vm._data.age = 88;
    console.log(vm);

    // vm 拿到 data 中的数据后，放在了 vm 里的 _data 中。实际上 data 就是 _data 。vm 中的 age 代理了 _data 中的 age 。读取 vm.age 时，调用 get 方法，读取了 _data 中的 age。修改了 vm 中的 age 时，就会调用 set 方法去修改 _data 中的 age。估计会有人想为什么要多此一举呢？其实，如果不做代理，那么在“{{  }}”中就要这样写了“{{_data.xxx}}”，会很麻烦。如果想要验证_data是否等于data。可以这样验证。
    console.log(data === vm._data);
  </script>
</html>
